<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>选择城市</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/layer.css" />
    <link rel="stylesheet" type="text/css" href="../css/mdw.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../script/swiper.min.js"></script>
    <script type="text/javascript" src="../script/mobile.js"></script>
    <script type="text/javascript" src="../script/layer.js"></script>
    <script type="text/javascript" src="../script/mdw.js"></script>
    <script type="text/javascript" src="../script/jumpPage.js"></script>

</head>
<body class="bg-eee">
    <header class="header">
        <div class="backPrevPage on" onclick="historyBack()"></div>
        <div class="pageTitle">选择国家</div>

    </header>
    <section class="choosePage HTML_BOX">

        <div class="bg-eee" style="border-bottom:.2rem solid #EEE ; "></div>
        <!-- <div class="gpsCity plr displayFlex">
            <div>不列跌国家</div>
            <div class="icon"><i></i>重新定位</div>
        </div> -->
        <div class="chooseTit plr displayFlex">当前国家列表</div>
        <div class="chooseBox">
            <ul class="chooseIndex"></ul>
            <ul class="cityList bg-fff">

            </ul>
        </div>
        <div class="bg-eee" style="border-bottom:.5rem solid #EEE ; "></div>
    </section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function(){
        $api.fixStatusBar($api.dom('header'));
        api.setStatusBarStyle({
            color: '#fff',//设置APP状态栏背景色
            style: 'dark'
        });
        ifCnAndEn();
        var character = new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","X","Y","Z");
        $.each(character,function(i,item){
            var html ='<li class="displayFlex">'+item+'</li>';
            $(".chooseIndex").append(html);
        })
        $(".chooseIndex li").click(function(){
            console.log($(this).text());
            event.stopPropagation();
        })
        ready();

    };

    function choose(id,name){
        api.sendEvent({
            name: 'chooseloading',
            extra: {
                id: id,
                name: name,
            }
        });
        historyBack();
    }


    function ready(){
        getAjax(Interface.country,{},function(res){
            var data = res.data;
            var keys = [];
            if(data!="" && data!=null){
                for(key in data){
                    keys.push(key);
                }
                console.log(JSON.stringify(data));
                $.each(data,function(i,item){
                    $.each(item,function(j,jtem){
                        var html = "";
                        if(j==0){
                            html ='<li onclick="choose(\''+jtem.id+'\',\''+jtem.title+'\')" class="displayFlex" data-name="'+keys[i]+'">'+jtem.title+'</li>';
                        }else{
                            html ='<li onclick="choose(\''+jtem.id+'\',\''+jtem.title+'\')" class="displayFlex" >'+jtem.title+'</li>';
                        }
                        $(".cityList").append(html);
                    })
                })
            }
        })
    }
</script>
<script type="text/javascript">
    function ifCnAndEn(){
        if(cnen==2){
          $(".pageTitle").html("Select Country");
          $(".chooseTit").html("Current Country");
        }
    }
</script>
</html>
